import React, { useEffect } from "react";
import { DatePicker } from "@ct0/ui";
import { useState } from "react";

export default function DatePickerPanel() {
  const [date, setDate] = useState();
  const [dateTime, setDateTime] = useState();

  const onDateChange = (v) => setDate(v);
  const onDateTimeChange = (v) => setDateTime(v);

  return (
    <div>
      <h2>DatePicker 日期时间筛选组件</h2>
      <ul>
        <li>提供日期选择功能、时间选择功能</li>
      </ul>
      <h2>代码演示</h2>
      <ul>
        <li>日期选择</li>
      </ul>
      <DatePicker picker="date" onChange={onDateChange} />
      <div style={{ marginTop: "10px" }}>当前选择日期时间戳为: {date}</div>
      <ul>
        <li>时间选择</li>
      </ul>
      <DatePicker picker="datetime" onChange={onDateTimeChange} />
      <div style={{ marginTop: "10px" }}>当前选择日期时间戳为: {dateTime}</div>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            {`import { DatePicker } from '@ct0/ui'`}
            {"\n"}
            {`const onChange = (newDate: number | null， dateString: string) => { 'update date value to newDate' }`}
            {"\n"}
            {`ReactDOM.render(`}
            {"\n"}
            {`<DatePicker onChange={onChange} picker="date" />`},mountNode)
          </code>
        </pre>
      </div>
      <ul>
        <li>不可选择今天之前的日期</li>
      </ul>
      <DatePicker
        picker="datetime"
        onChange={onDateTimeChange}
        disablePreviousDate={true}
      />
      <div style={{ marginTop: "10px" }}>当前选择日期时间戳为: {dateTime}</div>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            {`import { DatePicker } from '@ct0/ui'`}
            {"\n"}
            {`const onChange = (newDate: number | null， dateString: string) => { 'update date value to newDate' }`}
            {"\n"}
            {`ReactDOM.render(`}
            {"\n"}
            {`<DatePicker onChange={onChange} picker="date" disablePreviousDate={true} />`}
            ,mountNode)
          </code>
        </pre>
      </div>
      <h2>API</h2>
      <table border="1" width="60%">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>picker</td>
            <td>*</td>
            <td>选择器类型</td>
            <td>"date" || "datetime"(日期/日期时间)</td>
            <td>-</td>
          </tr>
          <tr>
            <td>value</td>
            <td>-</td>
            <td>日期</td>
            <td>number | null(number为13位时间戳)</td>
            <td>-</td>
          </tr>
          <tr>
            <td>defaultValue</td>
            <td>-</td>
            <td>默认日期</td>
            <td>number | null</td>
            <td>-</td>
          </tr>
          <tr>
            <td>className</td>
            <td>-</td>
            <td>额外的class</td>
            <td>string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>style</td>
            <td>-</td>
            <td>额外的样式</td>
            <td>{`CSSProperties`}</td>
            <td>-</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td>-</td>
            <td>回调函数</td>
            <td>number | null</td>
            <td>-</td>
          </tr>
          <tr>
            <td>disablePreviousDate</td>
            <td>-</td>
            <td>禁用今天之前的日期</td>
            <td>boolean</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
